<template>
  <div class="container" ref="el"></div>
</template>
<script>
import * as echarts from 'echarts'
import _ from 'lodash'

const baseOption = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  }
};

export default {
  name: 'CommonChartItem',
  // 组件接收到一个图表的配置项, 在接受一个根据图表数据来修改配置的方法
  props: ['option', 'formatOption', 'api'],
  data () {
    return {
      chartData: null,
      // 组件内自己的图表配置, 因为不能修改传入的属性, 所以根据传入的属性做一份自己的数据
      ownOption: { ...(_.cloneDeep(this.option)), ...baseOption }
    }
  },
  methods: {
    // 获取数据的方法
    handleGetKData () {
      this.api().then(res => {
        this.chartData = res
      })
    },
    listenWindowResize ()  {
      this.chartIns.resize()
    }
  },
  watch: {
    // 当图表数据变化 (接口调用成功)
    chartData: {
      handler () {
        // 交由传入的处理option的方法, 对option进行处理
        this.formatOption(this.chartData, this.ownOption)
        // 更新图表
        this.ownOption && this.chartIns.setOption(this.ownOption)
      }
    }
  },
  mounted () {
    this.handleGetKData()
    this.chartIns = echarts.init(this.$refs.el);
    this.ownOption && this.chartIns.setOption(this.ownOption)

    window.addEventListener('resize', this.listenWindowResize)
  },
  unmounted () {
    window.removeEventListener('resize', this.listenWindowResize)
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 300px;
  margin-bottom: 16px;
}
</style>
